<template>
	<view>
		<search></search>
		<!-- title -->
		<view class="list">
			<view class="list-it" v-for="item,index in list" :key="index" :class="{active:checkIndex==index}"
				@tap="qie(index)">
				{{item.name}}
			</view>
		</view>
		<!-- 列表 -->
		<view class="box" v-for="item,index in shop" :key="index" @tap="jump(item.goods_id)">
			<image class="left" :src="item.goods_big_logo" mode="widthFix"></image>
			<view class="rig">
				<view class="title">{{item.goods_name}}</view>
				<view class="price">
					￥{{item.goods_price}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../utils/api.js'
	import search from '../../componentas/search/search.vue'
	export default {
		components: {
			search
		},
		data() {
			return {
				params: {
					cid: '',
					query: '',
					pagenum: 1,
					pagesize: 5
				},
				list: [{
						name: '综合',
						status: 0
					},
					{
						name: '销量',
						status: 1
					},
					{
						name: '价格',
						status: 2
					}
				],
				checkIndex: 0,
				shop: []
			};
		},
		onLoad(options) {
			this.params.cid = options.id
			api.get('goods/search', this.params).then(res => {
				// console.log(res);
				this.shop = res.message.goods
			})
		},
		methods: {
			qie(i) {
				this.checkIndex = i
			},
			jump(id){
				uni.navigateTo({
					url:'/pages/Details/Details?id='+id
				})
			}
		},
		
	}
</script>

<style lang="scss">
	.box {
		margin: 10rpx;
		padding: 10rpx;
		border-bottom: 2rpx solid #ccc;
		display: flex;
		align-items: center;

		.left {
			width: 300rpx;
			height: 200rpx;
			;
		}

		.rig {
			flex: 1;
			margin-left: 10rpx;
			font-size: 30rpx;

			.price {
				color: red;
				font-size: 35rpx;
				margin-top: 20rpx;
			}
		}
	}

	.list {
		display: flex;
		height: 100rpx;
		align-items: center;

		.list-it {
			flex: 1;
			text-align: center;
			padding-bottom: 10rpx;
		}

		.active {
			border-bottom: 3px solid #eb4450;
			color: #eb4450;
		}
	}
</style>
